<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拼图</title>
    <script src="https://fastly.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style>
        body{
            margin: 0;
        }
        #app{
            width: 640px;
            height: 1200px;
            overflow: hidden;
        }
        .content{
            width: 100%;
            height: 100%;

            overflow: hidden;

            position: relative;
            z-index: 1;
        }
        .content:after{
            content:'' ;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            filter: blur(5px);
            background: url('/bg.jpg') no-repeat;
            background-size: cover;
            z-index: 2;
        }
        .main{
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 3;
        }
        .main{
            font-size: 70px;
            color: #fff;
            text-align: center;
        }
        .btn{
            font-size: 40px;
            padding: 5px 20px;
            border-radius: 10px;
            background-color: #5a5afc;
            color: #fff;
            border: none;
        }
        .imgbox{
            width: 400px;
            height: 600px;
            background: red;
            margin: 0 auto;
            margin-top: 50px;
            position: relative;
        }

        .image_list{
            width: 100px;
            height: 150px;
            background-image: url(/bgimg.png);
            position: absolute;
            transition: all .5s ease 0s;
        }

        .yuantu{
            position: absolute;
            top: 235px;
            left:120px;
            z-index: 10;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="content">
            <div class="main">
                <div>
                    {{dbl(timer.m)}}:{{dbl(timer.s)}}:{{dbl(timer.ms)}}
                </div>
                <div>
                    <button class="btn" @click="dasan()">打散</button>
                    <button class="btn" @click="xianshi()">提示</button>
                </div>
                <div class="imgbox">

                    <div class="image_list" :style="{left:left(item)+'px',top:top(item)+'px',
                    backgroundPosition: posi(index)}" v-for="(item,index) in 
                    img_arr" :data-index="index" :data-item="item" @touchstart="mousedown(index)"
                    @touchend="mouseup(index)" @touchmove="mousemove(index)">
                    </div>

                    <!-- <div class="image_list" style="left:0;top:0"></div>
                    <div class="image_list" style="left:100px;top:0;
                    background-position: -100px 0;"></div>
                    <div class="image_list" style="left:200px;top:0;
                    background-position: -200px 0;"></div>
                    <div class="image_list" style="left:300px;top:0;
                    background-position: -300px 0;"></div>

                    <div class="image_list" style="left:0;top:150px;
                    background-position: 0px -150px;"></div>
                    <div class="image_list" style="left:100px;top:150px;
                    background-position: -100px -150px;"></div>
                    <div class="image_list" style="left:200px;top:150px;
                    background-position: -200px -150px;"></div>
                    <div class="image_list" style="left:300px;top:150px;
                    background-position: -300px -150px;"></div> -->
                </div>
            </div>
            <div class="yuantu" :style="{display:display}">
                <img src="./bgimg.png">
            </div>

            </div>
      </div>
      <script>
          const img_arr=[]
          for (let index = 0; index < 16; index++) {
            img_arr.push(index)
              
          }
          
        //   console.log(img_arr);
          var app = new Vue({
            el: '#app',
            data: {
                timer:{
                    m:0,
                    s:0,
                    ms:0
                },
                display:'none',
                img_arr:[...img_arr]
            },
            created(){
                this.start_yet = false;
                this.timer_int = null 
                // this.ceshi()
                // setTimeout(() => {
                //    this.img_arr[2]=1 
                //    this.img_arr[1]=2
                //    console.log('this.img_arr:',this.img_arr);
                   
                //    this.$set(this.img_arr,'2',1)
                //    this.$set(this.img_arr,'1',2)
                // }, 1000);
                // this.suiji() 
                // this.diaohuan(this.img_arr,2,5)
                // console.log('this.img_arr:',this.img_arr);
            },
            methods:{
                dbl(s){
                    return s<10?'0'+s:s>100?parseInt(s/10):s
                },
                dasan(){
                    let max=3
                    let tm = setInterval(() => {
                        if(max==0){
                            clearInterval(tm)

                            this.start_yet = true

                            this.start_time=new Date()
                            
                            this.timer_int = setInterval(() => {
                                let tm = new Date()
                                let yongshi = tm-this.start_time
                                // console.log('yongshi: ',yongshi);
                                this.timer={
                                    m:new Date(yongshi).getMinutes(),
                                    s:new Date(yongshi).getSeconds(),
                                    ms:new Date(yongshi).getMilliseconds(),
                                } 
                }, 100);
                        }
                        this.suiji()
                        max--
                    }, 200);
                },
                xianshi(){
                    this.display = 'block'
                    setTimeout(() => {
                        this.display = 'none'
                    }, 1500);
                },
                // -(index%4)*100 计算的列，和position left 有关
                // Math.ceil((index+1)/4) - 1 行的算法 和top有关
                suiji(){
                    this.img_arr.sort(function(a,b){ return Math.random()-0.5})
                    console.log('this.img_arr:',this.img_arr);
                },
                // 计算posi
                posi(index){
                    let left = -(index%4)*100
                    let top =  -(Math.ceil((index+1)/4) - 1)*150

                    return `${left}px ${top}px`
                },

                left(item){
                    return item%4*100
                },

                top(item){
                    return (Math.ceil((item+1)/4) - 1)*150
                },

                diaohuan(arr,index1,index2){
                    return arr[index2] = arr.splice(index1,1,arr[index2])[0]
                },

                mousedown(index){
                    if(!this.start_yet){
                        alert('请点击打散')
                        return false
                    }
                    console.log('鼠标按下 index: ',index,event);
                    this.start_x=event.targetTouches[0].clientX
                    this.start_y=event.targetTouches[0].clientY
                    this.target = event.target
                    this.start_left = parseInt(this.target.style.left)
                    this.start_top = parseInt(this.target.style.top)
                    this.start_index = index
                    console.log('this.start_x:',this.start_x);
                },

                mousemove(index){
                    event.preventDefault()
                    let x = event.changedTouches[0].clientX - this.start_x
                    let y = event.changedTouches[0].clientY - this.start_y
                    console.log('x: ',x);
                    let left = this.start_left
                    let top = this.start_top

                    this.target.style.left = left+x+'px'
                    this.target.style.top = top+y+'px'
                    console.log('this.tsrget.style.left:',this.target.style.left);
                    console.log('移动的时候: ', event.changedTouches[0].clientX);
                },

                mouseup(index){
                    console.log('鼠标抬起 index: ',index);
                    console.log(event);
                    let obj = document.elementFromPoint(event.changedTouches[0].clientX,
                    event.changedTouches[0].clientY)
                    console.log(obj,'-obj');
                    if(!obj){
                        this.fuwei()
                        return false
                    }
                    let end_index = obj.getAttribute('data-index')
                    console.log('end_index: ',end_index);
                    if(!end_index || end_index == this.start_index){
                        this.fuwei()
                        return false
                    }

                    this.fuwei()
                    
                    this.diaohuan(this.img_arr,index,end_index)

                    if(JSON.stringify(this.img_arr) == JSON.stringify(img_arr)){
                        console.log('已完成拼图');
                        clearInterval(this.timer_int)
                        this.timer_int = null
                        this.start_yet = false
                    }
                    else{
                        console.log(this.img_arr);
                        console.log(img_arr);
                    }


                    
                },
                fuwei(){
                    this.target.style.left = this.start_left+'px'
                    this.target.style.top = this.start_top+'px'
                }

                // ceshi(){
                //     this.img_arr[0]=100
                //     console.log(this.img_arr,'--this.img_arr');
                //     console.log(img_arr,'--this.img_arr');
                // }
            }
            })
      </script>
</body>
</html>